<template>
  <div>
     <mt-swipe :auto="4000">
         <!-- 将来谁使用此轮播图组件，谁为我们传递lunbotulist -->
         <!-- 此时，lunbotulist应该是父组件向子组件传值 -->
        <mt-swipe-item v-for="(item,i) in lunbotuList" :key="i">
             <img :src="item.img" :class="{full:isfull}">
         </mt-swipe-item>
    </mt-swipe>
    <!-- 分析：为什么商品详情中的轮播图那么丑  -->
    <!-- 1、首页中的图片，宽高都是100% -->
    <!-- 2、在商品详情页中轮播图的图片如果使用宽高100%页面不好看 -->
    <!-- 3、商品详情页面中的轮播图期望高度100%，宽度自适应 -->
    <!-- 4、经过分析得到原因，首页中的轮播图和详情页中轮播图的分歧点就是宽度到底是100%还是自适应 -->
    <!-- 5、既然这两个轮播图其他方面没有冲突，只是宽度有问题，那我们可以定义一个属性，让使用轮播图的调用者指定是否100% -->
  </div>
</template>


<script>
export default {
    props: ["lunbotuList","isfull"]
}
</script>

<style>
    .mint-swipe-item{
        text-align: center
    }
    .mint-swipe {
        height: 200px
    }
    .mint-swipe-item img {
        /* width: 100%; */
        height: 100%;
    }
    .full{
        width: 100%
    }
</style>

